<!--景点详情页面的头部部分-->
<!--能够随着滑动渐隐显示与消失-->
<template>
	<div>
		<!--显示部分，左边小点，开始显示，随后消失-->
		<router-link tag="div" to="/" class="header-abs" v-show="showAbs" :style="opacityStyleLeft">
			<div class="iconfont header-abs-back">&#xe637;</div>
		</router-link>
		<!--开始隐藏，下滑后显示-->
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			<router-link to='/'>
				<div class="iconfont header-fixed-back">&#xe637;</div>
			</router-link>
			景点详情
		</div>
	</div>
</template>

<script>
	export default {
		name:'DetailHeader',
		data (){
			return {
				showAbs:true,
				opacityStyle:{
//					透明度,0为全透明
					opacity:0
				},
				opacityStyleLeft:{
					opacityLeft:1
				}
			}
		},
		methods: {
			handleScroll (){
//				获取与顶部的距离
				const top =document.documentElement.scrollTop
				if(top > 20 ){
					let opacity = top/140
					opacity = opacity > 1 ? 1 :opacity
					this.opacityStyle = {
						opacity:opacity
					}
					this.opacityStyleLeft = {
						opacityLeft:1-opacity
					}
					this.showAbs = false
				}else{
					this.showAbs = true
				}
			}
		},
//		监听全局滚动
		activated (){
			window.addEventListener('scroll',this.handleScroll)
		},
		deactivated (){
			window.removeEventListener('scroll',this.handleScroll)
		}
	}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
	.header-abs
		position:absolute
		left:.2rem
		top:.2rem
		width:.7rem
		height:.7rem
		line-height:.7rem
		border-radius:.35rem
		text-align:center
		background:rgba(0,0,0,.4)
		.header-abs-back
			color:rgba(255,255,255,.6)
			font-size:.5rem
			margin-left:-0.1rem
	.header-fixed
		z-index:2
		position:fixed
		top:0
		left:0
		right:0
		overflow:hidden
		height:$headerHeight
		line-height:$headerHeight
		text-align:center
		color:#fff
		background-color:$bgColor
		font-size:.32rem
		.header-fixed-back
			with:.64rem
			top:0
			left:.15rem
			text-align:center
			font-size:.5rem
			position:absolute
			color:#fff
</style>